<template>
  <div>
    <el-card class="login-card">
      <h2 class="login-title">登录</h2>
      <el-form :model="loginForm" ref="loginFormRef" :rules="rules" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="loginForm.type" class="radio-group">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-radio label="user">普通用户</el-radio>
              </el-col>
              <el-col :span="8">
                <el-radio label="admin">管理员</el-radio>
              </el-col>
              <el-col :span="8">
                <el-radio label="superAdmin">超级管理员</el-radio>
              </el-col>
            </el-row>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin">登录</el-button>
          <el-button type="default" @click="goToRegister">注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { login, adminLogin, superAdminLogin } from "@/api/api"; // 确保这里的路径是正确的

export default {
  name: "UserLogin",
  setup() {
    const loginForm = ref({
      username: "",
      password: "",
      type: "user", // 默认为普通用户
    });

    const router = useRouter();
    const goToRegister = () => {
      router.push("/UserRegister");
    };
    const loginFormRef = ref(null);

    const rules = {
      username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
      password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    };

    const handleLogin = () => {
      loginFormRef.value.validate((valid) => {
        if (valid) {
          const { username, password, type } = loginForm.value;
          if (type === "admin") {
            adminLogin(username, password)
              .then((user) => {
                ElMessage.success("登录成功！");
                localStorage.setItem("user", JSON.stringify(user));
                console.log(user);
                router.push("/AdminIndex");
              })
              .catch((error) => {
                console.error("管理员登录请求失败:", error);
                ElMessage.error("登录请求失败：" + error.message);
              });
          } else if (type === "superAdmin") {
            superAdminLogin(username, password) // 调用超级管理员登录接口
              .then((user) => {
                ElMessage.success("登录成功！");
                localStorage.setItem("user", JSON.stringify(user));
                console.log(user);
                router.push("/SuperAdmin"); // 重定向到超级管理员页面
              })
              .catch((error) => {
                console.error("超级管理员登录请求失败:", error);
                ElMessage.error("登录请求失败：" + error.message);
              });
          } else {
            login(username, password)
              .then((user) => {
                ElMessage.success("登录成功！");
                localStorage.setItem("user", JSON.stringify(user));
                console.log(user);
                router.push("/UserIndex");
              })
              .catch((error) => {
                console.error("普通用户登录请求失败:", error);
                ElMessage.error("登录请求失败：" + error.message);
              });
          }
        } else {
          ElMessage.error("请填写完整信息");
        }
      });
    };

    return {
      loginForm,
      loginFormRef,
      rules,
      handleLogin,
      goToRegister,
    };
  },
};
</script>

<style scoped>
.login-card {
  width: 400px;
  margin: 100px auto;
  padding: 20px;
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
}

.radio-group {
  display: flex;
  justify-content: space-around;
}

.el-row {
  margin-bottom: 20px;
}

.el-col {
  text-align: center;
}
</style>